<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="scatter" style="width: 800px; height: 650px;"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/ecstat/dist/ecstat.min.js"></script>-->
<!--    import * as ecStat from 'echarts-stat';-->

    <!--    <script src="js/echarts.js"></script>-->

    <script type="module">
        import * as echarts from 'echarts';
        import ecStat from 'echarts-stat';
        module.exports = require('./dist/ecStat.js');
        //scatter
        var scatterDom = document.getElementById('scatter');
        var scatterChart = echarts.init(scatterDom);

        echarts.registerTransform(ecStat.transform.regression);
        const scatterOption = {
            dataset: [
                {
                    source: [
                        [1, 4862.4],
                        [2, 5294.7],
                        [3, 5934.5],
                        [4, 7171.0],
                        [5, 8964.4],
                        [6, 10202.2],
                        [7, 11962.5],
                        [8, 14928.3],
                        [9, 16909.2],
                        [10, 18547.9],
                        [11, 21617.8],
                        [12, 26638.1],
                        [13, 34634.4],
                        [14, 46759.4],
                        [15, 58478.1],
                        [16, 67884.6],
                        [17, 74462.6],
                        [18, 79395.7]
                    ]
                },
                {
                    transform: {
                        type: 'ecStat:regression',
                        config: {
                            method: 'exponential'
                            // 'end' by default
                            // formulaOn: 'start'
                        }
                    }
                }
            ],
            title: {
                text: '1981 - 1998 gross domestic product GDP (trillion yuan)',
                subtext: 'By ecStat.regression',
                sublink: 'https://github.com/ecomfe/echarts-stat',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            xAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            yAxis: {
                splitLine: {
                    lineStyle: {
                        type: 'dashed'
                    }
                }
            },
            series: [
                {
                    name: 'scatter',
                    type: 'scatter',
                    datasetIndex: 0
                },
                {
                    type: 'line',
                    smooth: true,
                    datasetIndex: 1,
                    symbolSize: 0.1,
                    symbol: 'circle',
                    label: { show: true, fontSize: 16 },
                    labelLayout: { dx: -20 },
                    encode: { label: 2, tooltip: 1 }
                }
            ]
        };
        scatterChart.setOption(scatterOption);
    </script>
</body>
</html>